<template>
  <div class="test">
    <DTable
      :options="options"
      @addForm="form"
      @editFrom="emit"
      v-model:visible="a"
    >
      <template #action="{record}">
        <a-button type="primary" @click="test(record)">测试插槽</a-button>
      </template>
    </DTable>
  </div>
</template>

<script lang="ts">
import { message } from "ant-design-vue";
import { defineComponent,ref } from "vue";
import DTable from "../package/DTable/src/DTable.vue";

export default defineComponent({
  name: "App",
  data() {
    return {
      formOptions: {
        showBtn: true,
        labelAlign: "right",
        labelCol: { span: 4 },
      },
      searchOptions: {
        showBtn: true,
        layout: "inline",
        labelAlign: "right",
        labelCol: { span: 7 },
      },
    };
  },
  components: {
    DTable,
  },
  methods: {
    form(form: any) {
      console.log(form, "add");
    },
  },
  setup() {
    const a = ref(false);
    const test = (record: Object) => {
      message.info(JSON.stringify(record));
    };
    const options = {
      actionColumn: true,
      editAdel: true,
      pagination: { total: 50 },
      columns: [
        {
          type: "input",
          prop: "name",
          label: "姓名姓名",
          search: true,
        },
        {
          type: "cascader",
          prop: "age",
          label: "年龄姓名",
          search: true,
          labelCol: 4,
          displayRender: ({ labels }: { labels: string[] }) => {
            return labels[labels.length - 1];
          },
          options: [
            {
              value: "zhejiang",
              label: "Zhejiang",
              children: [
                {
                  value: "hangzhou",
                  label: "Hangzhou",
                  children: [
                    {
                      value: "xihu",
                      label: "West Lake",
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          type: "checkbox",
          prop: "address",
          label: "名称",
          search: true,
          struct: [
            {
              label: "A",
              value: "A",
            },
            {
              label: "B",
              value: "B",
            },
            {
              label: "C",
              value: "C",
            },
            {
              label: "D",
              value: "D",
            },
          ],
        },
        {
          type: "radio",
          prop: "test",
          label: "radio",
          struct: [
            {
              label: "A",
              value: "A",
            },
            {
              label: "B",
              value: "B",
            },
            {
              label: "C",
              value: "C",
            },
            {
              label: "D",
              value: "D",
            },
          ],
        },
        {
          type: "select",
          prop: "test1",
          label: "select",
          mode: "multiple",
          struct: [
            {
              label: "A",
              value: "A",
            },
            {
              label: "B",
              value: "B",
            },
            {
              label: "C",
              value: "C",
            },
            {
              label: "D",
              value: "D",
            },
          ],
        },
      ],
    };
    const emit = (from: any) => {
      console.log(from, "emit");
    };
    return {
      a,
      emit,
      options,
      test,
    };
  },
});
</script>

<style>
.test {
  padding: 50px;
}
</style>
